<template>
    <fieldset>
        <legend>登录页</legend>
        用户名：
        <input type="text" v-model="username">
        <br>
        密码：
        <input type="password" v-model="password" @click.enter="login">
        <button @click="login">登录</button>
    </fieldset>
</template>
<script setup>
import { ref } from "vue"
import * as api from "../../api/users"
import { useRouter, onBeforeRouteLeave, onBeforeRouteUpdate, onBeforeRouteEnter, useRoute, useLink } from "vue-router"
//1.获取输入框中的用户名和密码
let username = ref("")
let password = ref("")

//2.发起请求，请求登录

let router = useRouter()

let login = async () => {
    let res = await api.loginApi(username.value, password.value)

    //服务器会返回token,这个token是个令牌,这个令牌需要保存在本地,后续请求的时候带上令牌,就能随意访问服务器的数据了

    //1.localStorage,关掉页面,只要token还具备时效性，那么就能访问其它页面,不需要冲洗你登入
    //2. sessStorage,用户关掉页面，token就被清除,不管它还升不生效,重新打开页面,用户重新登入

    if (res.data.state) {
        //将token存到本地
        sessionStorage.setItem('qf-token', res.data.token)
        //页面要进行跳转
        router.push("/")
    } else {
        alert(res.data.msg)
    }

    console.log(res);
}

//3.判断请求成功和请求失败的情况

//组件独享钩子

// onBeforeRouteEnter((to,from,next)=>{
//     next(vm=>{
//         //这就是组件实例，afterEach之后回传回来的
//         console.log(vm);
//     })
//     console.log('路由进入登录页面之前');
// })

// onBeforeRouteLeave(()=>{
//     console.log('路由离开登录页面');
// })

// onBeforeRouteUpdate(()=>{
//     console.log('路由更新');
// })

let route = useRoute() //this.$route

console.log(useLink());
</script>